
<%-include('layout/header.ejs',{title: '微博 - 注册', isNarrow:true}) %>
<h1>注册</h1>
<% if (locals.isLogin) { %>
  <p><%= locals.userName %>您已成功登录，请直接访问 <a href="/">首页</a></p>
<% } else { %>
  <form>
    <div class="form-group">
        <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
        <small id="span-username-info" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="input-password-repeat" placeholder="重新输入密码">
        <small id="span-password-repeat-info" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
        <select class="form-control" id="select-gender">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">保密</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary" id="btn-submit">注册</button>
    &nbsp;
    <a href="/login">已有账号，返回登录>></a>
  </form>

  <script>
      $(function() {
          var $inputUserName = $('#input-username')
          var $spanUserNameInfo = $('#span-username-info')
          var $inputPassword = $('#input-password')
          var $inputPasswordRepeat = $('#input-password-repeat')
          var $spanPasswordRepeatInfo = $('#span-password-repeat-info')
          var $selectGender = $('#select-gender')
          var userNameTimeoutId
          var passwordTimeoutId
          var isPasswordSame = false // 默认两次密码不一致
          var isUserNameExist = true // 默认用户名已存在

          // 监听用户名输入
          $inputUserName.on('input', function() {
              // 做一个简单的防抖
              if (userNameTimeoutId) {
                  clearTimeout(userNameTimeoutId)
              }
              userNameTimeoutId = setTimeout(function() {
                  // 判断用户名是否已存在
                  var userName = $inputUserName.val()
                  ajax.post('/api/user/isExist', {
                      userName
                  }, function(err, data) {
                      $spanUserNameInfo.show()
                      if (err) {
                          $spanUserNameInfo.text('用户名可用')
                          isUserNameExist = false
                      } else {
                          $spanUserNameInfo.text('用户名已存在！')
                          isUserNameExist = true
                      }
                  })
              }, 500)
          })

          // 监听验证密码输入
          $inputPasswordRepeat.on('input', function () {
              // 做一个简单的防抖
              if (passwordTimeoutId) {
                  clearTimeout(passwordTimeoutId)
              }
              passwordTimeoutId = setTimeout(function() {
                  var password = $inputPassword.val()
                  var passwordRepeat = $inputPasswordRepeat.val()
                  $spanPasswordRepeatInfo.show()
                  if (password === passwordRepeat) {
                      $spanPasswordRepeatInfo.text('两次密码一致')
                      isPasswordSame = true
                  } else {
                      $spanPasswordRepeatInfo.text('两次密码不一致！')
                      isPasswordSame = false
                  }
              }, 500)
          })

          // 注册事件
          $('#btn-submit').click(function(e) {
              // 阻止默认的提交表单行为
              e.preventDefault()

              // 验证
              if (isUserNameExist) {
                  alert('用户名已存在')
                  return
              }
              if (!isPasswordSame) {
                  alert('两次密码不一致')
                  return
              }

              var userName = $inputUserName.val()
              var password = $inputPassword.val()
              var gender = parseInt($selectGender.val())

              // 提交数据
              ajax.post('/api/user/register', {
                  userName,
                  password,
                  gender
              }, function(err, data) {
                  if (err) {
                      alert(err)
                      return
                  }
                  alert('注册成功，请登录')
                  location.href = '/login'
              })
          })
      })
  </script>  
<% } %>  
<%-include('./layout/footer.ejs')%>